<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Recoup Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link rel="stylesheet" href="css/swipebox.css">
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
       <script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
				});
			});
		</script>
		<script type="text/javascript">
		$(document).ready(function() {
				/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
				*/
		$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!------ Light Box ------>
    <script src="js/jquery.swipebox.min.js"></script> 
    <script type="text/javascript">
		jQuery(function($) {
			$(".swipebox").swipebox();
		});
	</script>
    <!------ Eng Light Box ------>

</head>
<body>
<!-- header -->
	<div class="banner">
		<div class="container">
			<div class="logo">
				<h1>欢迎浏览我的网页</h1>
			</div>	
			<div class="banner-info">我的名字是
			  <h3>覃雨佳</h3>
			</div>
		</div>
	</div>
<!-- header -->
<!-- about -->
				<div class="scroll">
					<a href="#contact" class="scroll"><img src="images/down.png" class="img-responsive" alt=""></a>
				</div>
	<div class="about">
		<div class="container">
			<h3>&nbsp;</h3>
			<div class="study2">
			<div class="col-md-6 about-left">
						<h4>姓名						</h4>
						<div class="progress">
						  <div class="progress-bar progress-bar-danger-3" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
							<span class="sr-only">20% Complete</span>
						  </div>
						</div>
						<h4>性别</h4>
						<div class="progress">女
						  <div class="progress-bar progress-bar-danger-3" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
							<span class="sr-only">30% Complete (warning)</span>
						  </div>
						</div>
						<h4>学历</h4>
						<div class="progress">大专
						  <div class="progress-bar progress-bar-danger-3" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
							<span class="sr-only">50% Complete (danger)</span>
						  </div>
						</div>
					</div>
					<div class="col-md-6 about-right">家庭住址
					  <div class="progress">广西来宾
                        <div class="progress-bar progress-bar-danger-3" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
							<span class="sr-only">70% Complete (danger)</span>
						  </div>
						</div>
						<h4>&nbsp;</h4>
						<div class="progress">
						  <div class="progress-bar progress-bar-danger-3" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
							<span class="sr-only">60% Complete (danger)</span>
						  </div>
						</div>
						<h4>photoshop</h4>
						<div class="progress">
						  <div class="progress-bar progress-bar-danger-3" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
							<span class="sr-only">90% Complete (danger)</span>
						  </div>
						</div>
						<h4>media</h4>
							<div class="progress">
							  <div class="progress-bar progress-bar-danger-3" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">
								<span class="sr-only">75% Complete (success)</span>
							  </div>
							</div>
					</div>
		</div>
	</div>
	</div>
<!-- about -->
<div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >手机网站模板</a></div>
<!-- services -->
	<div class="services">
		<div class="container">
			<h3>Services</h3>
			<div class="service-grids">
							<div class="col-md-4 service-grid">
									<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
								<h4>THE BEST DESIGN</h4>
								<span> </span>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem Ipsum passages containing of Letraset sheets</p>
							</div>
							<div class="col-md-4 service-grid">
								<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
								<h4>THE BEST SUPPORT</h4>
								<span> </span>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem Ipsum passages containing of Letraset sheets</p>
							</div>
							<div class="col-md-4 service-grid">
								<span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span>
								<h4>THE BEST SOLUTIONS</h4>
								<span> </span>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem Ipsum passages containing of Letraset sheets</p>
							</div>
							<div class="col-md-4 service-grid">
								<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
								<h4>THE BEST SOLUTIONS</h4>
								<span> </span>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem Ipsum passages containing of Letraset sheets</p>
							</div>
							<div class="col-md-4 service-grid">
								<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
								<h4>THE BEST SOLUTIONS</h4>
								<span> </span>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem Ipsum passages containing of Letraset sheets</p>
							</div>
							<div class="col-md-4 service-grid">
								<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
								<h4>THE BEST SOLUTIONS</h4>
								<span> </span>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem Ipsum passages containing of Letraset sheets</p>
							</div>
							<div class="clearfix"> </div>
						</div>
		</div>
	</div>
<!-- services -->
<!-- portfolio -->
	<div class="gallery">
		<div class="container">
			<h3>Portfolio</h3>
			<div class="portfolio">
					<div id="portfoliolist">
					<div class="portfolio card mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/2.JPG" class="swipebox"  title="Image Title"> <img src="images/2.JPG" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>				
					<div class="portfolio app mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/3.JPG" class="swipebox"  title="Image Title"> <img src="images/3.JPG" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>					
					<div class="portfolio icon mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/4.JPG" class="swipebox"  title="Image Title"> <img src="images/4.JPG" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>
					<div class="portfolio app mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/5.JPG" class="swipebox"  title="Image Title"> <img src="images/5.JPG" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>			
					<div class="portfolio card mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/6.JPG" class="swipebox"  title="Image Title"> <img src="images/6.JPG" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>	
					<div class="portfolio card mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/7.JPG" class="swipebox"  title="Image Title"> <img src="images/7.JPG" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>	
					<div class="portfolio icon mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/13.JPG" class="swipebox"  title="Image Title"> <img src="images/13.JPG" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
						</div>
					<div class="portfolio logos mix_all wow bounceIn" data-wow-delay="0.4s" data-cat="logos" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/14.JPG" class="swipebox"  title="Image Title"> <img src="images/14.JPG" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>
				<div class="clearfix"></div>					
				</div>
		  <div class="clearfix"></div>
			</div>

		</div>
	</div>
<!-- portfolio -->	
<!-- client -->
	<div class="client">
		<div class="container">
			<h3>Clients</h3>
			<div class="nbs-flexisel-container"><div class="nbs-flexisel-inner"><ul id="flexiselDemo1" class="nbs-flexisel-ul" style="left: -228px; display: block;">			
					
					<li class="nbs-flexisel-item" style="width: 300px;">
						<div class="sliderfig-grid">
							<img src="images/5.png" alt=" " class="img-responsive">
						</div>
					</li>
					<li class="nbs-flexisel-item" style="width: 300px;">
						<div class="sliderfig-grid">
							<img src="images/2.png" alt=" " class="img-responsive">
						</div>
					</li>
					<li class="nbs-flexisel-item" style="width: 300px;">
						<div class="sliderfig-grid">
							<img src="images/3.png" alt=" " class="img-responsive">
						</div>
					</li>
					<li class="nbs-flexisel-item" style="width: 300px;">
						<div class="sliderfig-grid">
							<img src="images/4.png" alt=" " class="img-responsive">
						</div>
					</li>
					<li class="nbs-flexisel-item" style="width: 300px;">
						<div class="sliderfig-grid">
							<img src="images/6.png" alt=" " class="img-responsive">
						</div>
					</li>
					<li class="nbs-flexisel-item" style="width: 300px;">
						<div class="sliderfig-grid">
							<img src="images/7.png" alt=" " class="img-responsive">
						</div>
					</li>
					<li class="nbs-flexisel-item" style="width: 300px;">
						<div class="sliderfig-grid">
							<img src="images/5.png" alt=" " class="img-responsive">
						</div>
					</li>
					<li class="nbs-flexisel-item" style="width: 300px;">
						<div class="sliderfig-grid">
							<img src="images/1.png" alt=" " class="img-responsive">
						</div>
					</li>
					
					
					</ul>
					<div class="nbs-flexisel-nav-left" style="top: 27.5px;"></div><div class="nbs-flexisel-nav-right" style="top: 27.5px;"></div></div></div>
					<script type="text/javascript">
							$(window).load(function() {
								$("#flexiselDemo1").flexisel({
									visibleItems: 7,
									animationSpeed: 1000,
									autoPlay: true,
									autoPlaySpeed: 3000,    		
									pauseOnHover: true,
									enableResponsiveBreakpoints: true,
									responsiveBreakpoints: { 
										portrait: { 
											changePoint:480,
											visibleItems: 2
										}, 
										landscape: { 
											changePoint:640,
											visibleItems:3
										},
										tablet: { 
											changePoint:768,
											visibleItems: 3
										}
									}
								});
								
							});
					</script>
					<script type="text/javascript" src="js/jquery.flexisel.js"></script>



		</div>
	</div>
<!-- client -->
<!-- contact -->
	<div class="contact" id="contact">
		<div class="container">
			<h3>Contact</h3>
			<div class="footer-left">
				<li><i class="add"> </i>lorem ipsum</li>
				<li><i class="phone"> </i>1234567890</li>
				<li><a href="mailto:info@example.com"><i class="mail"> </i>info@sitename.com </a></li>
			<div class="soci">
					<ul>
						<li><a href="#"><i class="facebk"> </i></a></li>
						<li><a href="#"><i class="twter"> </i></a></li>
						<li><a href="#"><i class="goopl"> </i></a></li>
						<li><a href="#"><i class="insta"> </i></a></li>
							<div class="clearfix"></div>	
					</ul>
			</div>
			</div>
			<div class="co-ntact">
	
				  <form method="post" action="contact-post.html">
					<div class="to">
                     	<input type="text" class="text" value="Name" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Name';}">
					 	<input type="text" class="text" value="Email" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Email';}">
					 	<input type="text" class="text" value="Subject" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Subject';}">
					</div>
					<div class="text">
	                   <textarea value="Message" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Message';}">Message</textarea>
	                   <div class="form-submit">
			           <input name="submit" type="submit" id="submit" value="Submit"><br>
			           </div>
	                </div>
	                <div class="clearfix"></div>
                   </form>
			</div>
		</div>
		<div class="map">
			</div>
			<p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
	</div>
	<a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 0;"></span> <span id="toTopHover" style="opacity: 0;"> </span></a>
<!-- contact -->
</body>
</html>